import React, { useEffect, useState } from 'react';
import { useHistory } from "react-router-dom";
import './giftWriteOff.less';
import http from "../../model/http";
import { SearchBar, Toast, List, Button, Modal, Tabs, Badge, Radio } from 'antd-mobile'
import Header from "../../components/header/Header";


/**
 * @name 判断iOS
 */
const isiOS = () => {
    let u = navigator.userAgent;
    let iOs = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端\
    return iOs;
}

function GiftWriteOff() {
    const history = useHistory();
    const nowTimeStamp = new Date();
    const RadioItem = Radio.RadioItem,
        Item = List.Item 
    const [isiOSBool, setIsiOSBool] = useState(false)
    // 输入框的值
    const [searchValue, setSearchValue] = useState('')
    const [userDetail, setUserDetail] = useState({})
    const [btnShow, setBtnShow] = useState('')
    const [searchSubmitValue, setSearchSubmitValue] = useState('')

    // 验证手机号
    const [searchPhoneValue, setSearchPhoneValue] = useState('')

    const [radioDataList, setRadioDataList] = useState([])
    // 选择的radio 
    const [checkboxVal, setCheckboxVal] = useState('')
    const [radioShow, setRadioShow] = useState('')
    const [phoneMsg, setPhoneMsg] = useState('')
    const [tabs, setTabs] = useState([
        { title: <Badge>短信兑换码</Badge> },
        { title: <Badge>无短信兑换码</Badge> },
    ])
    
    useEffect(async () => {
        if (isiOS() == true) {
            setIsiOSBool(true)
        }

    }, [])

    const searchChange = (value, type='') => {
        if(type == 'phone'){
            setSearchPhoneValue(value.replace(/\D/g, ''))
        }else{
            setSearchValue(value.replace(/\D/g, ''))
        }
        

    }
    const searchSubmit = async (type = '') => {
        if (type != 'phone') {
            if (searchValue == '') { Toast.fail('请输入兑换码'); return }
            const result = await http.post('/callcenter/writeOffCheck', {
                code: searchValue
            })
            setUserDetail(result)
            if (result.code == 0) {
                // Toast.success(result.msg) 
                setBtnShow('1')
                setSearchSubmitValue(searchValue)
            } else {
                Toast.fail(result.msg)
                setBtnShow('2')
                setSearchSubmitValue('')
            }
        } else {
            // 无短息兑换
            if (searchPhoneValue == '') { Toast.fail('请输入兑换手机号'); return }
            let phoneBool = /^1[3,4,5,6,7,8,9][0-9]{9}$/.test(searchPhoneValue.toString())
            if (phoneBool) {  
                const result = await http.post('/callcenter/noMsgGiftCheck', {
                    mobile: searchPhoneValue
                })
                if (result.code == 0) {
                    // Toast.success(result.msg)  
                    setRadioShow('1')
                    setRadioDataList(result.checklist)
                } else {
                    Toast.fail(result.msg) 
                    setRadioShow('2')
                    setPhoneMsg(result.msg)
                }
            } else {
                Toast.fail('请输入正确的11位手机号'); return
            }

        }

    }

    const submitClick = (type = '') => {
        if (type == 'phone' && checkboxVal == '') { Toast.fail('请先选择需要兑换的礼品'); return }
        Modal.alert('提示', '确认核销', [
            { text: '取消' },
            {
                text: '确认', onPress: async () => {
                    if (type != 'phone') {
                        const result = await http.post('/callcenter/writeOff', {
                            code: searchSubmitValue
                        })
                        if (result.code == 0) {
                            Toast.success(result.msg)
                            setSearchValue('')
                            setUserDetail({})
                            setBtnShow('')
                            setSearchSubmitValue('')
                        } else {
                            Toast.fail(result.msg)
                        }
                    } else { 
                        const result = await http.post('/callcenter/noMsgGift', {
                            mobile: searchPhoneValue,
                            typename: checkboxVal
                        })
                        if (result.code == 0) {
                            Toast.success(result.msg)
                            setSearchPhoneValue('') 
                            setRadioShow('') 
                        } else {
                            Toast.fail(result.msg)
                        } 
                    }

                }
            }
        ])
    }

    const tabsChange = () => {
        setSearchValue('')
        setUserDetail({})
        setBtnShow('')
        setSearchSubmitValue('')
        setSearchPhoneValue('') 
        setRadioShow('')
    }
    return (
        <div className="v-gift-write-off">
            <Tabs
                tabs={tabs}
                initialPage={1}
                onChange={(tab, index) => { tabsChange() }}
                onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
            >
                <div style={{ backgroundColor: '#fff' }}>
                    <SearchBar
                        placeholder="请输入兑换码"
                        value={searchValue}
                        onChange={(value) => searchChange(value)}
                        onSubmit={() => searchSubmit()}
                    />
                    <List className='c-out-user-msg g-p5-10 g-bg-f g-bdrs12 g-mb10'>
                        <Item extra={userDetail.customerName ? userDetail.customerName : '-'} className='c-out-user-msg-card-name'>顾客姓名</Item>
                        <Item extra={userDetail.customerCardNo ? userDetail.customerCardNo : '-'}>顾客卡号</Item>
                        <Item extra={userDetail.developer ? userDetail.developer : '-'}>开发人</Item>
                        <Item extra={userDetail.consultname ? userDetail.consultname : '-'} wrap>所属现场</Item>
                    </List>
                    {btnShow == '1' && (<Button className={'frequency-next-step2'} type="primary" onClick={() => submitClick()}>核销</Button>)}
                    {btnShow == '2' && (<div className="text-center-style">{userDetail.msg}</div>)}
                </div>

                <div style={{ backgroundColor: '#fff' }}>
                    <SearchBar
                        placeholder="请输入手机号"
                        value={searchPhoneValue}
                        onChange={(value) => searchChange(value,'phone')} 
                        onSubmit={() => searchSubmit('phone')}
                        maxLength={11}
                    />

                    {radioShow == '1' && (
                        <div className="box-content">
                            <div className="box-content-checkbox">
                                <div className="box-content-checkbox-title">
                                    <p>礼品选项</p>
                                    <span>最多选择1项</span>
                                </div>
                                <div className="box-content-checkbox-content">
                                    {radioDataList.length > 0 && radioDataList.map(item => (
                                        <List>
                                            <RadioItem key={item.typename} checked={checkboxVal == item.typename} onChange={() => {
                                                setCheckboxVal(item.typename)
                                            }}>
                                                {item.typename}
                                            </RadioItem>
                                        </List>
                                    ))}

                                </div> 
                            </div> 
                        </div>
                    )}
                     




                    {radioShow == '1' && (<Button className={'frequency-next-step2'} type="primary" onClick={() => submitClick('phone')}>核销</Button>)}
                    {radioShow == '2' && (<div className="text-center-style">{phoneMsg}</div>)}
                </div>

            </Tabs>

            <Header />
        </div>

    );
}
export default GiftWriteOff;
